<template>
    <div style="display:block;">
        <el-dialog title="选择地址" :visible.sync="show" @close="closeEvent">
            <el-form :rules="formRules" ref="dataAddressForm" :model="addressBean" label-position="right" label-width="80px"
                     style='width: 700px; margin-left:50px;'>
                <el-form-item label="省市区" prop="address">
                    <el-cascader :options="cityDate" v-model="addressBean.address" @change="reLocation" style="width:400px;"></el-cascader>
                </el-form-item>
                <el-form-item label="街道地址" prop="street">
                    <el-input v-model="addressBean.street" placeholder="填写街道地址" type="textarea" style="width:400px;" @change="reLocation"></el-input>
                </el-form-item>
            </el-form>
            <div class="map_area">
                <div id="address_map" style="width:600px;height:210px;margin:0 auto;"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

	import cityData from "./city_data.js";
	import API from '@/api'
	import Http from '@/http'
	import Msg from '@/utils/msg'

    var map;
	export default {
		name: "cityPicker",
		data() {
			return {
				cityData: cityData,
				addressBean: {
					address: [],
					street: ''
				},
				formRules: {
					address: [{required: true, message: '请选择企业地址', trigger: 'blur'}],
					street: [{required: true, message: '请填写街道地址', trigger: 'blur'}]
				},
				cityDate: cityData,
				show: true
			}
		},
		props: {
			address_id: {
				type: String,
				default() {
					return ""
				}
			},
		},
		computed: {},
		created() {
			const that = this;
			if(this.address_id){
				Http.getModel(API.get_address, {id: this.address_id}, false).then((json) => {
					this.dealing = false
					if (json.code == 0) {
						var data = json.data
						this.addressBean=data
                        this.addressBean.address=[data.province,data.city,data.town];
						console.log("addressBean:",this.addressBean)
						this.initMap();
					} else {
						Msg.error(json.msg)
						this.initMap();
					}
				})
            }else{
				setTimeout(()=>{
					this.initMap()
                },50)
            }

		},
		methods: {
			closeEvent() {
				this.$emit('addressDialogClose')
			},
			initMap(){
				var latlng = {
					lat:parseFloat(this.addressBean.lat) || 39.916527,
                    lng:parseFloat(this.addressBean.lng) || 116.397128

				}
				var center = new qq.maps.LatLng(latlng.lat,latlng.lng)
				map = new qq.maps.Map(document.getElementById("address_map"), {
					// 地图的中心地理坐标。
					center: center,
					zoom: 13,
				});
				new qq.maps.Marker({
					position: center,
					map: map
				});
            },
			reLocation(){
				var address = this.addressBean.address[0]+this.addressBean.address[1]+(this.addressBean.address[2]?this.addressBean.address[2]:"") + this.addressBean.street
				var callbacks={
					complete:(result)=>{
						map.setCenter(result.detail.location);
						var marker = new qq.maps.Marker({
							map:map,
							position: result.detail.location
						});
						this.addressBean.lat = result.detail.location.lat;
						this.addressBean.lng = result.detail.location.lng;
					},
				}
				var geocoder = new qq.maps.Geocoder(callbacks); // 创建地址解析器实例
				// 将地址解析结果显示在地图上,并调整地图视野
				geocoder.getLocation(address);
            },
			doSubmit() {
				this.$refs['dataAddressForm'].validate((valid) => {
					if (valid) {
						var address_bean = this.addressBean
						var address = this.addressBean.address[0]+this.addressBean.address[1]+(this.addressBean.address[2]?this.addressBean.address[2]:"") + this.addressBean.street
						if(address_bean.length==2){
							address_bean.province = address_bean.address[0].substr(0,2)
							address_bean.city = address_bean.address[0]
							address_bean.town = address_bean.address[1]
						}else{
							address_bean.province = address_bean.address[0]
							address_bean.city = address_bean.address[1]
							address_bean.town = address_bean.address[2]
                        }
						Http.getModel(API.save_address, address_bean, false).then((json) => {
							this.dealing = false
							if (json.code == 0) {
								Msg.success("保存成功！",()=>{
									this.$emit('addressDialogClose',address,json.data.address_id)
                                })

							} else {
								Msg.error(json.msg)
							}
						})
					}
				})

			}
		}
	};
</script>


